<template>
    <view class="submit-bar submit-bar-large">
        <view class="content">
            <view class="flex">
                <view class="icon-container">
                    <view class="icon">
                        <text class="iconfont icon-shouye-zhihui"></text>
                    </view>
                    <view class="text">
                        <text>首页</text>
                    </view>
                </view>
                <view class="icon-container">
                    <view class="icon">
                        <text class="iconfont icon-gouwuche"></text>
                    </view>
                    <view class="text">
                        <text>购物车</text>
                    </view>
                </view>
            </view>
            
            <view class="button-container flex">
                <button class="frog-button shopping-cart-button">加入购物车</button>
                <button class="frog-button buy-button">立即购买</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'FrogSubmitBar',
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    .submit-bar {
        position: fixed;
        min-height: 40px;
        width: 100%;
        bottom: 0;
    }
    
    .submit-bar-large{
        height: 60px;
    }
    
    .content{
        border-top: 1px solid var(--color-line);
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    .icon-container{
        padding:0 10px;
    }
    
    .icon text{
        font-size: 30px;
    }
    
    .text{
        font-size: 14px;
    }
    
    .button-container{
        flex:1;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }
    
    .shopping-cart-button,.buy-button{
        margin: 0;
        border-radius: 0;
        color:#fff;
        padding:4px 40rpx;
        width:inherit;
    }
    
    .shopping-cart-button{
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        background-color: var(--color-theme);
    }
    
    .buy-button{
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        background-color: #D91933;
        
    }
</style>